<template>
	<view>
		<UserItemCard :options="progress"></UserItemCard>
		<view class="demand-item" @click="goDemand()">
			<view class="demand-item-left">
				<label class="demand-item-label">查看需求</label>
				<label class="demand-item-text">点击查看该需求详情页</label>
			</view>
			<label class="user-item-arrow"></label>
		</view>
		<view class="demand-steps">
			<uni-steps :options="stepsList" direction="column" :active="stepsIndex"></uni-steps>
			<view class="demand-footer" v-if="stepsIndex<3">
				<label class="demand-btn cancel" @click="onLeftBtnClick">{{progress.leftLabel}}</label>
				<label class="demand-btn ok" @click="onRightBtnClick">{{progress.rightLabel}}</label>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSteps from '../../components/uni-steps.vue'
	import UserItemCard from '../../components/user-Item-Card.vue'
	export default {
		components: {
			uniSteps,
			UserItemCard
		},
		data() {
			return {
				stepsIndex: 0,
				progress: {},
				stepsList: [{
						title: "招聘中",
						desc: "请仔细筛选报名人选，合适给予通过，不合适给予放弃"
					},
					{
						title: "进行中",
						desc: "请与服务方沟通需求细节，便于更加顺利完成任务"
					},
					{
						title: "待评价",
						desc: "请对本次服务给予评价，感谢~"
					},
					{
						title: "已完成",
						desc: "本次任务已结束"
					},
				]
			}
		},
		onLoad(e) {
			if(e && e.index)
			this.stepsIndex = e.index
			this.getInfo();
		},
		methods: {
			getInfo() {
				this.progress = {
					userId: 1,
					head: "url",
					userName: "沈燕",
					company: "公司名称某某某有限公司",
					isAuth: true,
					score: 4.5,
				}
				this.setSteps();
			},
			setSteps() {
				// 根据接口返回值给this.stepsIndex赋值
				if (this.stepsIndex == 0) {
					this.progress.leftLabel = '放弃';
					this.progress.rightLabel = '录取';
				} else if (this.stepsIndex == 1) {
					this.progress.leftLabel = '结束需求';
					this.progress.rightLabel = '下一步';
				} 
				else if (this.stepsIndex == 2) {
					this.stepsList[2].title = "已评价"
					this.progress.leftLabel = '结束需求';
					this.progress.rightLabel = '下一步';
				} 
				this.$forceUpdate()
			},
			goDemand(id){
				uni.navigateTo({
					url: "../index/detail?id=" + id
				})
			},
			onLeftBtnClick() {
				if (this.stepsIndex == 0) {
					console.log("放弃")
				}else if (this.stepsIndex == 1) {
					console.log("结束需求")
				}
			},
			onRightBtnClick() {
				if (this.stepsIndex == 0) {
					console.log("录取")
					this.stepsIndex = 1;
					this.setSteps();
				}else if (this.stepsIndex == 1) {
					console.log("下一步")
					var _this = this;
					uni.showModal({
						title: "操作确认",
						content: "确定需求已完成,进入下一步？",
						confirmText: "确定",
						cancelText: "取消",
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
								_this.stepsIndex=2;
								_this.setSteps();
								uni.navigateTo({
									url:"./demandSuccess"
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					})
				}else if (this.stepsIndex == 2) {
					this.stepsIndex = 3
				}
			},
		}
	}
</script>

<style>
	page {
		height: 100%;
		background-color: #F4F4F4;
	}
	.demand-item {
		margin-bottom: 8rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 28rpx 32rpx;
	}

	.demand-item-left {
		display: flex;
		flex-flow: column;
		flex: 1;
	}

	.demand-item-label {
		color: #181818;
		font-size: 30rpx;
		font-weight: 500;
		background: url(../../static/images/icon-demand-show@3x.png) left center no-repeat;
		background-size: 30rpx;
		padding-left: 35rpx;
	}

	.demand-item-text {
		margin-top: 10rpx;
		color: #7B7B7B;
		font-size: 24rpx;

	}

	.user-item-arrow {
		width: 32rpx;
		height: 32rpx;
		background: url(../../static/images/icon_jinru@3x.png) center no-repeat;
		background-size: 32rpx;
	}

	.demand-steps {
		background-color: #FFFFFF;
	}

	.uni-steps {
		padding: 32rpx 18rpx;
		padding-bottom: 0;
		border-bottom: 1rpx solid #DDDDDD;
	}

	.demand-footer {
		display: flex;
		padding: 44rpx 32rpx;
		align-items: center;
		justify-content: space-evenly;
	}

	.demand-btn {
		width: 187rpx;
		height: 60rpx;
		line-height: 60rpx;
		border: 2rpx solid #E5E5E5;
		border-radius: 12rpx;
		font-size: 28rpx;
		text-align: center;
	}

	.demand-btn:active {
		opacity: 0.8;
	}

	.demand-btn.cancel {
		color: #7B7B7B;
		background: #FBFAFC;
	}

	.demand-btn.ok {
		color: #FFFFFF;
		background: #2050F5;
	}
</style>
